<template>
	<BaseField v-bind="props" @outClick="emit('outClick')" :visible="visible">
		<div class="field-text" style="width: 100%">
			<div class="view" :class="{ 'view-tag': tag }" v-if="status === 'view'" @click="handleClick">
				<ComTag v-if="isValid(modelValue)" :tag="tag || false">
					{{ getValue(fieldType, prop, modelValue) }}
				</ComTag>
				<span v-else>--</span>
			</div>
			<div class="edit animate__animated animate__fadeIn" style="width: 100%" v-else>
				<!-- 数字 -->
				<a-input-number
					class="shadow-border"
					:size="size"
					v-if="fieldType === 'number'"
					ref="inputRef"
					@change="handleChange"
					hide-button
					v-model="dataValue"
					type="number"
					:placeholder="placeholder"
					:min="0"
					:precision="prop.point"
					:max="prop.type == 2 ? 100 : undefined"
				>
					<template #suffix>
						<p v-if="prop.type === 2">%</p>
					</template>
				</a-input-number>
				<!-- 移动电话 -->
				<a-input class="shadow-border" :size="size" v-else-if="fieldType === 'phone'" ref="inputRef" @change="handleChange" type="number" v-model="dataValue" :placeholder="placeholder" :max-length="11">
					<template #prefix>
						{{ prop?.unit }}
					</template>
				</a-input>
				<!-- 文本 -->
				<a-input class="shadow-border" :size="size" v-else v-model="dataValue" ref="inputRef" @change="handleChange" :placeholder="placeholder"></a-input>
			</div>
		</div>
	</BaseField>
</template>

<script setup lang="ts">
import { SelectInfo } from "@/utils";
import { useShowFieldList, getValue } from "@/utils/field";
import { useFocusFn } from "./utils/useFocus";
import { propsInfo } from "./utils/props";
import BaseField from "./BaseField.vue";
import { useI18n } from "@/hooks/useI18n";
import { isValid } from "@/utils/index";
const visible = ref(false);

const inputRef = ref();
const { t } = useI18n();
const list = useShowFieldList();
const props = defineProps({
	...propsInfo,
	tag: {
		type: Boolean,
		default: false
	}
});
useFocusFn(props, inputRef);
const placeholder = computed(() => {
	return t("base.placeholder") + (props.name || SelectInfo(list, props.fieldType || "text", "label", "fieldType"));
});
const emit = defineEmits(["update:modelValue", "update:fieldShow", "change", "outClick"]);

const dataValue = ref();
const textFn = (data) => {
	if (["number"].includes(props.fieldType)) {
		return Number(data);
	}
	return data;
};

watch(
	() => dataValue.value,
	() => {
		handleUpdate();
	}
);

const handleUpdate = () => {
	const data = isValid(dataValue.value) ? dataValue.value : "";
	emit("update:modelValue", data);
	emit("update:fieldShow", data);
};

const handleChange = () => {
	handleUpdate();
	emit("change");
};
watch(
	() => props.modelValue,
	(data) => {
		dataValue.value = isValid(data) ? textFn(data) : "";
		handleUpdate();
	},
	{ immediate: true }
);

const handleClick = () => {
	return;
	if (props.fieldType === "email") {
		window.open(props.modelValue);
	}
};
</script>

<style lang="scss"></style>
